<!-- 运营统计数据表表-->

<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" :isExport="false"/>
        <!-- 报表检索条件组件 -->
        <ReportSearch 
            :loading="loading"
            :searchFormDatas="searchFormDatas" 
            v-model:searchForm="searchForm"
            @handleSearchForm="handleSearchForm"
            @handleResetForm="handleResetForm" />
        <!-- 报表表格标题组件-->
        <ReportTableTitle :tableTitle="tableTitle" />
        <div class="tableContainer">
            <ul>
                <li v-for="item in tableData" :key="item.prop">
                    <span class="label">{{ item.label }}</span>
                    <span class="value">{{ item.value || '--' }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';
import ReportTableTitle from '@/components/reportTableTitle/index.vue';

import * as local from '@/utils/cache/localStorage';
import * as server from '@/api/modules/productOperateAnalysis';
import * as basicServer from '@/api/modules/common';

import { getCurYearMonth } from '@/utils/date';
import { apiFn, deepCopy } from '@/utils/utilFns';

// 报表标题信息
const titleInfo = reactive({
    title: '运营统计数据表',
    description: ""
});

// 报表表格标题
const defaultTitle = '运营统计数据表';
const tableTitle = ref(defaultTitle);

// 默认表单数据
const defaultSearchForm = {
    orgIds: local.getItem('defaultOrgIds'),
    queryDate: getCurYearMonth(),
	queryType: "2",
};

// 默认表格数据
const defaultTableData = [
    {
        label: '当月里程(km)',
        prop: 'monthMileage',
        value: ''
    },
    {
        label: '当月重载里程(km)',
        prop: 'monthHeavyloadMileage',
        value: ''
    },
    {
        label: '当月车数(车)',
        prop: 'monthTrainNumber',
        value: ''
    },
    {
        label: '当月产量',
        prop: 'monthEarthwork',
        value: ''
    },
    {
        label: '年总里程(km)',
        prop: 'yearMileage',
        value: ''
    },
    {
        label: '年总重载里程(km)',
        prop: 'yearHeavyloadMileage',
        value: ''
    },
    {
        label: '年总车数(车)',
        prop: 'yearTrainNumber',
        value: ''
    },
    {
        label: '年总产量',
        prop: 'yearEarthwork',
        value: ''
    },
    {
        label: '入矿总里程(km)',
        prop: 'inMineMileage',
        value: ''
    },
    {
        label: '入矿总重载里程(km)',
        prop: 'inMineHeavyloadMileage',
        value: ''
    },
    {
        label: '入矿总车数(车)',
        prop: 'inMineTrainNumber',
        value: ''
    },
    {
        label: '入矿总产量',
        prop: 'inMineEarthwork',
        value: ''
    },
];

// 加载状态
const loading = ref(false);

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'selectTree',
        label: '所属组织',
        prop: 'orgIds',
        options: [],
        api: () => { },
        placeholder: '请选择所属组织',
        rules:[{required: true, message: '请选择所属组织', trigger: ['blur, change']}]
    },
    {
        id: 1,
        type: 'dateMonthPicker',
        prop: 'queryDate',
        label: '日期',
        options: [],
        api: () => { },
        placeholder: '请选择日期',
        rules:[{required: true, message: '请选择日期', trigger: ['change']}]
    },
    {
        id: 2,
        type: 'select',
        prop: 'queryType',
        label: '产量类型',
        options: [],
        api: () => { },
        placeholder: '请选择产量类型',
    }
]);

// 表格数据
const tableData = ref(defaultTableData);

// 表单数据
const searchForm = reactive(deepCopy(defaultSearchForm));

onMounted(() => {
    getYieldOptions();
});

// 所属组织变化监听
watch(() => searchForm.orgIds, () => {
    getYieldOptions();
});

// 获取产量options
const getYieldOptions = () => {
    const params = {
        equal: { orgId: searchForm.orgIds }
    };
   
    apiFn(basicServer.getYieldList, params)
        .then((res) => {
            const { code, data = [] } = res;
            if (code === '200') {
                searchForm['queryType'] = data[0].value;
                searchFormDatas.value[2]['options'] = data;
            } else {
                searchFormDatas.value[2]['options'] = [];
            }
        }).catch(() => {
            searchFormDatas.value[2]['options'] = [];
        });
};

// 获取查询参数
const getParams = () => {
    const { orgIds, queryDate, queryType } = searchForm;

    const params = {
        equal: {
            orgId: orgIds,
            queryDate: queryDate.replaceAll("-", ""),
            queryType
        },
    };

    return params;
};

// 获取报表列表内容
const getTableList = () => {
    const params = getParams();
    loading.value = true;
    apiFn(server.getOperateStatisData, params)
        .then(res => {
            const { code, data } = res;
            if (code === '200') {
                analysisTableData(data);
            }
        }).catch(() => {
            tableData.value = {};
        }).finally(() => {
            loading.value = false;
        })
};

// 表格数据解析
const analysisTableData = (data={}) => {
    let copyData = deepCopy(defaultTableData);
    
    copyData.forEach(item => {
        const { prop } = item;
        if(data.hasOwnProperty(prop)){
            item['value'] = data[prop];
        }
    });
    
    tableData.value = copyData;
    tableTitle.value = `${defaultTitle} ( ${searchForm.queryDate} )`;
};

// 查询
const handleSearchForm = (type) => {
    if(loading.value) return;
    
    getTableList();
};

// 重置
const handleResetForm = () => {
    Object.keys(searchForm).forEach(key => {
        if (key in defaultSearchForm) {
            searchForm[key] = defaultSearchForm[key];
        }
    });
    
    tableTitle.value = defaultTitle;
    tableData.value = defaultTableData;
};
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>